<template>
	<view class="page-container back-white">
		<!-- 主要内容 -->
		<view class="content">
			<!-- 自定义导航 -->
			<my-navigation ref="nav" from="message" pageTitle="消息" backColorOpacity="1" @clickReadAll="quickReadAll"></my-navigation>
			
			<!-- tabs标签区域 -->
			<!-- <view :style="{position: 'sticky', top: navHeight+'px', left: 0, zIndex: 99}">
				<u-tabs :list="topList" :is-scroll="false" :current="listType" @change="change1"
					font-size="30" :bold="false" :bar-width="40" :bar-height="8" inactive-color="#999999" :active-color="primaryColor2">
				</u-tabs>
			</view> -->
			
			<!-- tabs标签区域 -->
			<view v-if="listType==0" :style="{position: 'sticky', top: navHeight+'px', left: 0, zIndex: 99}">
				<u-tabs :list="tabList" :is-scroll="false" :current="type" @change="change2"
					font-size="30" :bold="false" :bar-width="40" :bar-height="8" inactive-color="#999999" :active-color="primaryColor">
				</u-tabs>
			</view>
			
			<!-- 我评论的列表 -->
			<view v-show="type==0 && list0.length">
				<view v-for="(item, index) in list0" :key="index">
					<my-messagecard :item="item" :type="1"></my-messagecard>
				</view>
				<u-loadmore :status="loadStatus0" />
			</view>
			
			<!-- 回复我的列表 -->
			<view v-show="type==1 && list1.length">
				<view v-for="(item, index) in list1" :key="index">
					<my-messagecard :item="item" :type="2"></my-messagecard>
				</view>
				<u-loadmore :status="loadStatus1" />
			</view>
			
			<!-- TA点赞的列表 -->
			<view v-show="type==2 && list2.length">
				<view v-for="(item, index) in list2" :key="index">
					<my-messagecard :item="item" :type="2"></my-messagecard>
				</view>
				<u-loadmore :status="loadStatus2" />
			</view>
			
			<!-- 平台通知的列表 -->
			<view v-show="type==3 && list3.length">
				<view v-for="(item, index) in list3" :key="index">
					<my-messagecard :item="item" :type="0"></my-messagecard>
				</view>
				<u-loadmore :status="loadStatus3" />
			</view>
		
			<view v-if="showNodata" class="col-box center pcol-lg">
				<image src="/static/icon/nodata.png" style="width: 400rpx;height: 400rpx;"></image>
				<text class="s24 grey-light">消息空空如也~</text>
			</view>
			
		</view>
			
		<!-- 发布分类选择 -->
		<!-- <u-select
			v-model="showPublishCateSelect"
			:list="publishCates"
			value-name="id"
			label-name="name"
			title="请选择分类"
			confirm-text="去发布"
			:confirm-color="primaryColor"
			@confirm="selectPublishCate">
		</u-select> -->
		
		<!-- 自定义tabbar -->
		<!-- <u-tabbar :list="tabbar" :mid-button="true" active-color="#1BBBAF" inactive-color="#333333"
			:border-top="false" icon-size="54" mid-button-size="94" height="62px" :before-switch="beforeChangeTab">
		</u-tabbar> -->
	</view>
</template>

<script>
	import { mapState,mapMutations } from "vuex"
	export default {
		data() {
			return {
				navHeight: 0, // 导航高度
				// topList: [ {name: '点赞评论', count: 0}, {name: '平台通知', count: 0}, {name: '审核通知', count: 0} ],
				tabList: [ {name: '我评论的'}, {name: '回复我的', count: 0}, {name: 'TA点赞的', count: 0}], // tab列表
				// 消息类型:1.动态视频点赞，2.动态评论点赞，3.动态评论的回复点赞,4.动态评论,5.动态评论的回复
				listType: 0, // 当前一级分类tab
				type: 0, // 当前二级分类tab
				// 列表数据相关
				pageSize: 10, // 每页数据量
				pageIndex0: 1, // 第几页
				pageCount0: 0, // 页数
				list0: [], // 列表
				pageScroll0: 0, // 页面滚动距离
				loadStatus0: 'loadmore',  // 加载状态
				
				pageIndex1: 1, // 第几页
				pageCount1: 0, // 页数
				list1: [], // 列表
				pageScroll1: 0, // 页面滚动距离
				loadStatus1: 'loadmore',  // 加载状态
				
				pageIndex2: 1, // 第几页
				pageCount2: 0, // 页数
				list2: [], // 列表
				pageScroll2: 0, // 页面滚动距离
				loadStatus2: 'loadmore',  // 加载状态
				
				pageIndex3: 1, // 第几页
				pageCount3: 0, // 页数
				list3: [], // 列表
				pageScroll3: 0, // 页面滚动距离
				loadStatus3: 'loadmore',  // 加载状态
			}
		},
		computed: {
			...mapState('m_page', ['tabbar', 'publishCates']),
			...mapState('m_user', ['userId']),
			
			// 是否展示无数据
			showNodata() {
				switch (this.listType){
					case 0:
						if (this[`list${this.type}`].length < 1 && this[`loadStatus${this.type}`] == 'nomore') {
							return true
						} else {
							return false
						}
						break;
					default:
						if (this.list3.length < 1 && this[`loadStatus${this.type}`] == 'nomore') {
							return true
						} else {
							return false
						}
						break;
				}
				
			},
			
			// 消息类型
			messageType() {
				switch (this.listType){
					case 0:
						return this.type + 1
						break;
					case 1:
						return 6
						break;
					case 2:
						return 7
						break;
					default:
						break;
				}
			}
		},
		onLoad() {
			this.navHeight = this.$refs.nav.navHeight
			// 获取消息角标
			this.getMessageCount()
		},
		onShow() {
			// 设置底部tabbar消息角标
			this.setBadge()
			// 获取消息角标
			this.getMessageCount()
			// 获取消息列表
			this.getMessageList(0)
		},
		onPullDownRefresh() {
			this.getMessageList(0)
		},
		onReachBottom() {
			this.getMessageList(1)
		},
		onPageScroll(e) {
			// console.log('滚动',e)
			this[`pageScroll${this.type}`] = e.scrollTop
		},
		methods: {
			...mapMutations('m_page', ['updateBeforeChangeTab']),
			
			// 全部已读
			quickReadAll() {
				this.$api.QuickReadAll().then(res => {
					console.log('QuickReadAll-success', res)
					if (res.data.code == 200) {
						// 获取所有角标
						this.getAllBadge()
						// 获取消息角标
						this.getMessageCount()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log('QuickReadAll-fail', err)
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			},
			
			// 切换tab1
			change1(index) {
				if (this.listType == index) return
				
				this.listType = index
				if (index == 0) {
					this.type = 0
					if (!this[`list${this.type}`].length) { // 未加载过数据
						return this.getMessageList(0)
					} else {
						setTimeout(() => {
							uni.pageScrollTo({
								duration: 0,
								scrollTop: this[`pageScroll${this.type}`]
							})
						},0)
					}
				} else {
					this.type = 3
					return this.getMessageList(0)
				}
			},
			
			// 切换tab2
			change2(index) {
				if (this.type == index) return
				
				this.type = index
				if (!this[`list${this.type}`].length) { // 未加载过数据
					return this.getMessageList(0)
				}
				setTimeout(() => {
					uni.pageScrollTo({
						duration: 0,
						scrollTop: this[`pageScroll${this.type}`]
					})
				},0)
			},
			
			// 获取消息角标
			getMessageCount() {
				this.$api.GetMessageCount().then(res => {
					console.log('GetMessageCount-success', res)
					if (res.data.code == 200) {
						this.tabList[1].count = res.data.data.commentCount
						this.tabList[2].count = res.data.data.likeCount
					} else {
						// uni.showToast({
						// 	icon: 'none',
						// 	title: res.data.msg
						// })
					}
				}).catch(err => {
					console.log('GetMessageCount-fail', err)
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			},
			
			// 获取消息列表
			getMessageList(condition) {
				// 判断情况， 0新获取 1分页
				if (condition == 0) {
					this[`pageIndex${this.type}`] = 1
				} else if (this[`pageIndex${this.type}`] >= this[`pageCount${this.type}`]) {
					return this[`loadStatus${this.type}`] = 'nomore'
				} else {
					this[`pageIndex${this.type}`] += 1
				}
				this[`loadStatus${this.type}`] = 'loading'
				this.$api.GetMessageList({
					current: this[`pageIndex${this.type}`],
					limit: this.pageSize,
					type: this.messageType
				}).then(res => {
					console.log('GetMessageList-success', res)
					if(res.data.code == 200) {
						if (this[`pageIndex${this.type}`] == 1) {
							this[`list${this.type}`] = res.data.data.records
							this[`pageCount${this.type}`] = res.data.data.pages
						} else {
							this[`list${this.type}`] = [...this[`list${this.type}`], ...res.data.data.records]
						}
						if (this[`pageIndex${this.type}`] < this[`pageCount${this.type}`]) {
							this[`loadStatus${this.type}`] = 'loadmore'
						} else {
							this[`loadStatus${this.type}`] = 'nomore'
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log('GetMessageList-fail', err)
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			},
		}
	}
</script>

<style lang="scss">

</style>
